<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
    <el-form-item label="角色名称" prop="roleName">
      <el-input v-model.trim="ruleForm.roleName" />
    </el-form-item>
    <el-form-item label="角色描述" prop="roleDesc">
      <el-input v-model.trim="ruleForm.roleDesc" />
    </el-form-item>
    <el-form-item style="margin-bottom: -10px; margin-top: 40px">
      <el-row type="flex" justify="end">
        <el-button size="small" @click="resetForm('ruleForm')">取消</el-button>
        <el-button size="small" type="primary" @click="submitForm('ruleForm')">确定</el-button>
      </el-row>
    </el-form-item>
  </el-form>
</template>

<script>
import { tableAdd, tableEditor } from '@/api/table'
export default {
  name: 'Tablecharacter',
  components: { },
  props: {
    tableThickness: {
      type: Boolean,
      default: false
    },
    rowList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        roleName: '',
        roleDesc: ''
      },
      rules: {
        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        roleDesc: [{ required: true, message: '请输入角描述', trigger: 'blur' }]
      }
    }
  },
  computed: {}, // 计算属性
  watch: {
  },
  created() {
    if (this.rowList) {
      this.ruleForm.roleName = this.rowList.roleName
      this.ruleForm.roleDesc = this.rowList.roleDesc
    } else {
      return {}
    }
  },
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          try {
            if (this.rowList) {
              await tableEditor(this.rowList.id, this.ruleForm)
              this.$emit('')
              this.$message.success('修改成功~！')
            } else {
              await tableAdd(this.ruleForm)
              this.$message.success('添加成功~！')
            }
            await this.resetForm('ruleForm')
          } catch (error) {
            console.log(error)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.$emit('tableRoles')
      this.$emit('update:tableThickness', false)
    }
  }
}
</script>

<style scoped>

</style>
